const htmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
    mode: 'production', // development
    entry: './src/app.js',
    output: {
        // path: './dist/js', //webpack3.0
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]-bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader',
            // exclude: path.resolve(__dirname, './node_modules'),
            include: path.resolve(__dirname, './src'),
        // options: {
        //     presets: ['latest']
        // }
        }, {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: (loader) => [
                            require('autoprefixer')({
                                browsers: ['last 5 versions']
                            })
                        ]
                    }
                }
            ]
        // loader: 'style-loader!css-loader?importLoaders=1!postcss-loader',
        // loaders:['style-loader','css-loader','postcss-loader']
        }, {
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: (loader) => [
                            require('autoprefixer')({
                                browsers: ['last 5 versions']
                            })
                        ]
                    }
                },
                'less-loader'
            ]
        // loader: 'style-loader!css-loader?importLoaders=1!postcss-loader',
        // loaders:['style-loader','css-loader','postcss-loader']
        }, {
            test: /\.scss$/,
            use: [
                'style-loader',
                'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: (loader) => [
                            require('autoprefixer')({
                                browsers: ['last 5 versions']
                            })
                        ]
                    }
                },
                'sass-loader'
            ]
        // loader: 'style-loader!css-loader?importLoaders=1!postcss-loader',
        // loaders:['style-loader','css-loader','postcss-loader']
        }, {
            test: /\.html$/,
            loader: 'html-loader'
        }, {
            test: /\.tpl$/,
            loader: 'ejs-loader'
        }, {
            test: /\.(png|jpg|gif|svg)$/i,
            use:[
            'url-loader?limit=2000&name=assets/[name]-[hash:5].[ext]',
            'image-webpack-loader'
            ]
// loader: 'file-loader',
// options: {
//     name: 'assets/[name]-[hash:5].[ext]'
// }
        }]
    },
    // postcss: [
    //     require('autoprefixer')({
    //         browsers: ['last 5 versions']
    //     })
    // ],
    plugins: [
        new htmlWebpackPlugin({
            // filename: 'index-[hash].html',
            filename: 'index.html',
            template: 'index.html',
            inject: 'body'
        })
    ]
}